<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>我的服务</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__STATIC__/css/cellar/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="__STATIC__/css/cellar/public_fontsize.css" />
		<link rel="stylesheet" href="__STATIC__/css/cellar/iconfont.css" />
		<script type="text/javascript" src="__STATIC__/js/cellar/mui.min.js"></script>
		<script type="text/javascript" src="__STATIC__/js/cellar/jquery-1.8.3.min.js" ></script>
		<style>
			ul, ol, li,p,img{list-style: none outside none;-webkit-margin-before: 0em;-webkit-margin-after: 0em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;-webkit-padding-start: 0px;border: 0;}
			.phone{width:100%;margin-top: 0.8em;}
			.phone ul{width:100%;}
			.phone ul li{width: 100%;background: #fff;border-top: solid 1px #e1e1e1;border-bottom: solid 1px #e1e1e1;position: relative;}
			.phone ul li:first-child{border-bottom: 0;}
			.phone ul li input{border: 0;line-height: 2.95em;height:2.95em;padding: 0 10px;margin-bottom: 0;border-radius: initial;}
			.phone ul li label{position: absolute;right: 0em;line-height: 2.95em;color: #d82b34;top: 0;width: 30%;text-align: center;}
			.bt_phoen{margin:3em auto 0;width:90%;}
			.bt_phoen input{width:100%;line-height: 2.95em;padding: 0 0;background:#d82b34 ;color: #fff;border:0;}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav white fs_xl">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title fs_xl">手机绑定</h1>
		</header>
		<div class="mui-content cont fs_xl">
			<form action="{:U('User/mobile_validate')}" method="post">
			<div class="phone">
				<ul>
					<li>
						<input class="fs_xl" type="tel" placeholder="请输入手机号码" name="mobile" value="{$user_info.mobile}" id="phone" />
					</li>
					<li>
						<input class="fs_xl" type="text" placeholder="验证码" name="code" id="mobile" />
						<label class="hqyzm fs_xl" onclick="getCode(this)" id="J_getCode" smstype="<if $user_info['password']>5<else>7</if>"> 获取验证码</label>
						<label class="hqyzm fs_xl" onclick="getCode(this)" id="J_resetCode" style="display:none;color: #666;">
							<em id="J_second">60</em>秒后重发
						</label>
					</li>
				</ul>
			</div>
			<div class="bt_phoen fs_xl">
				<input class="fs_xl" type="submit" value="确定" id="doBtn" />
			</div>
			</form>
		</div>
		<script>	
		    
			var isPhone = 1;
			function resetCode() {
				$('#J_getCode').hide();
				$('#J_second').html('60');
				$('#J_resetCode').show();
				var second = 60;
				var timer = null;
				timer = setInterval(function() {
					second -= 1;
					if (second > 0) {
						$('#J_second').html(second);
					} else {
						clearInterval(timer);
						$('#J_resetCode').hide();
						$('#J_getCode').show();
						$('#J_getCode').text("重新获取");
						$('#J_getCode').css("color","#f04020");
					}
				}, 1000);
			}//倒计时
			
			function getCode(e) {
				var ph=$("#phone").val();
				var reg=/^1[3|4|5|7|8][0-9]{9}$/;
				var flag = reg.test(ph)
				if(ph==''){
					alert("请输入手机号码");
				}else if(!flag){
					alert("请输入正确的手机号码！");
				}else{
					var smstype = e.getAttribute("smstype");//短信类型
					var mobile = $("input[name=mobile]").val();
					var mob=mobile.substring(0,3)+"****"+mobile.substring(7,11)
					$.ajax({
						type:"POST",
						url:"/Mobile/User/sendSms",
						data:{"smstype":smstype,"mobile":mobile},
						dataType:"json",
						success:function(date){
							if(date.status == 1){
								resetCode(); //倒计时
								alert("平台已经向您的手机"+mob+"发送了一条验证码，请及时查收！");
							}else{
								alert(date.msg);
							}
						}
					});
				}			
			}
			
		    $(function(){
		        $("#phone").change(function(){
		        	var mobile=$("#phone").val();
		        	$.post("{:U('User/is_exist_mobile')}",{"mobile":mobile},function(msg){
		        		if(msg.status == 1){
		        			$("#phone").focus();
		        			alert("手机号已存在！");
		        			$("#J_getCode").css("pointer-events","none");
		        			return false;
		        		}
		        		else{
		        			$("#J_getCode").css("pointer-events","auto");
		        			$(".phone p").html("");
		        		}
		        	},"json");
		        });
//		        $(".hqyzm").on("tap",function(){
//		        	getCode(this);
//		        });
		    });

		    
		    
			$(function(){
				$(".bt_phoen").click(function(){
					var code = $('#mobile').val();
					if (code == '') {
						alert('请输入验证码！');
						$("#mobile").focus();
						return false;
					}
					$.ajaxSetup({   
			            async : false  
			        });
					var i=1;
					var tel = $("input[name=mobile]").val();
	        	    $.post("{:U('User/is_exist_mobile')}",{"mobile":tel}, function(msg){
		        		if(msg.status == 1){
		        			$("#phone").focus();
		        			alert("手机号已存在！");
		        			i = 0;
		        		}
		        		else{
		        			$(".phone p").html(" ");
		        		}
		        	},"json");
		        	
		        	if(i == 0){
		        		return false;
		        	}
				});
			})
		</script>
	</body>

</html>